require('./Addpersonfield.styl');
const { Avatar, Boxs, Toast, Popup, List, Button } = SaltUI;
const { HBox, Box, VBox } = Boxs
const avatarColors = ['#78C06E', '#3BC2B5', '#78919D', '#5EC9F6', '#F6BF26'];
const ArrowLine = require('images/svg/arrow_line.svg');
import { monStorage, Storage } from 'clientConfig/util/StoreData';
const connact = require('clientConfig/util/jsapi/connact');
import { Control } from 'react-keeper';
const GetUser = require('components/getuser');
const GetUserList = require('components/getuserslist');

const DB = require('app/db.js');

class Addpersonfield extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            approvers: this.props.approvers && (this.props.approvers instanceof Array ? this.props.approvers : [this.props.approvers]) || [],//审批人列表
            testLenght: 3,
            getuser: false,
            getuserslist: false,
        };
        this.handleReduce = this.handleReduce.bind(this);
        this.handleGetUsersList = this.handleGetUsersList.bind(this);
        this.handleBack = this.handleBack.bind(this);
        this.handleUserCancle = this.handleUserCancle.bind(this);
        this.dealAddUser = this.dealAddUser.bind(this);
        this.approvers = [];
        this.resume = 0
    }
    //点击加号添加审批人
    handlePlusClick() {
        this.setState({ getuserslist: true })
    }

    handleGetUsersList(filter) {
        var user_list = []
        DB.Approval.get_org({
            role: filter.text
        }).then((content) => {
            content.map((item, index) => {
                var obj = {}
                obj.text = item.name;
                obj.id = item.id;
                user_list.push(obj)
            })
            this.setState({
                getuser: true,
                user_list: user_list
            })
        }).catch((error) => { // 失败 or 有异常被捕获

        })
    }

    handleBack() {
        this.setState({ getuser: false })
    }
    handleUserCancle() {
        this.setState({ getuserslist: false })
    }

    //人员添加处理
    dealAddUser(obj) {
        let { approvers } = this.state;
        // debugger
        if (obj) {
            if (approvers.length > 0) {
                let index = approvers.findIndex(item => item.id == obj.id)
                if (index != -1) {
                    Toast.show({
                        type: 'error',
                        content: `审批人已经在列表中`
                    });
                    return;
                }
            }
            approvers.push({
                name: obj.name,
                id: obj.id
            });
            this.setState({
                approvers: approvers,
                getuser: false,
                getuserslist: false
            }, () => {
                this.props.cb && this.props.cb(this.dealApprovers(approvers))
                this.props.union && this.props.union(this.dealUnionid(approvers))
            });
        }
    }

    //审批人列表
    dealApprovers(data) {
        let names = [];
        for (let item of data) {
            names.push(item.name)
        }
        return names
    }
    //获取审批人unionid
    dealUnionid(data) {
        let ids = [];
        for (let item of data) {
            // debugger
            ids.push(item.id)
        }
        return ids
    }
    //点击头像删除审批人
    handleReduce(index) {
        let t = this,
            { approvers } = t.state;
        if (!this.props.edit) {
            approvers.splice(index, 1);
            this.setState({
                approvers
            }, () => {
                this.props.cb && this.props.cb(t.dealApprovers(approvers))
                this.props.union && this.props.union(t.dealUnionid(approvers))
            });
        }
    }

    render() {
        const { state: { getuser, getuserslist, user_list, approvers }, handleGetUsersList, handleBack, handleUserCancle, handleSetUser, dealAddUser } = this;
        return (
            <div className="addpersonfield">
                <p>{this.props.label}</p>
                <HBox >
                    {approvers && approvers.map((item, index) => {
                        return (
                            <HBox vAlign="center" className='center' >
                                <Box onClick={() => { this.handleReduce(index) }} >
                                    <Avatar name={item.name} size={41} className="t-MB6 t-MT14" />
                                    <p className="add">{item == monStorage.get('user.nickname') ? "我" : item.name}</p>
                                </Box>
                                <Box className="level">
                                    <ArrowLine width="29" height="15" />
                                </Box>
                            </HBox>)
                    })}
                    {
                        approvers.length < this.props.maxLength && <div className="addBox ">
                            <p className="pulsCircle" onClick={this.handlePlusClick.bind(this)}>+</p>
                            <p className="add">添加</p>
                        </div>
                    }
                </HBox>
                <GetUser active={getuser} user_list={user_list} handleBack={handleBack} handleSetUser={dealAddUser} />
                <GetUserList active={getuserslist} handleGetUsersList={handleGetUsersList} handleUserCancle={handleUserCancle} />
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        // document.addEventListener('resume', () => {
        //     this.handlerResume();
        // });
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.approvers && nextProps.approvers instanceof Array) {
            let approvers = [],
                approvers_id = [];
            for (let index in nextProps.approvers) {
                if (typeof nextProps.approvers[index] == 'object') approvers.push({ name: nextProps.approvers[index].name, id: nextProps.approvers_id[index].id })
                else if (typeof nextProps.approvers[index] == 'string') approvers.push({ name: nextProps.approvers[index], id: nextProps.approvers_id[index] })
            }
            approvers.length > 0 && this.setState({ approvers })
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        document.removeEventListener('resume', this.dealAddUser.bind(this));
    }
}

module.exports = Addpersonfield;
